<script setup lang="ts">
import { findByPage, findByIds, findByTimes } from "@/api/alarm";
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref } from "vue";

// 报警记录

interface AlarmRecord {
  id: number;
  companyName: string;
  warehousetype: string | number;
  hostSn: string;
  meterSn: string;
  meterName: string;
  collectionTime: string;
  tem: number;
  maxMinTem: string;
  temAlert: number;
  hum: number;
  maxMinHum: string;
  humAlert: number;
}

// 表格数据
const tableData = ref<Array<AlarmRecord>>([]);
const pageInfo = reactive({
  pageNum: 1,
  pageSize: 10,
});
const total = ref(0);

// 查询条件
const id = ref();
const time = ref({
  startTime: "",
  stopTime: "",
});

// 所有数据
const getInfo = () => {
  findByPage(pageInfo)
    .then((res: any) => {
      tableData.value = res.data.data.rows;
      total.value = res.data.data.total;
    })
    .catch(() => {
      ElMessage.error("请联系管理员");
    });
};

// 通过编号查寻
const getById = () => {
  findByIds(id.value)
    .then((res: any) => {
      tableData.value = res.data.data.rows;
      total.value = res.data.data.total;
    })
    .catch(() => {
      ElMessage.error("请联系管理员");
    });
};

// 通过时间查寻
const getByTime = () => {
  if(time.value.startTime == '' || time.value == null) {
    return;
  }
  findByTimes(time.value)
    .then((res: any) => {
      tableData.value = res.data.data.rows;
      total.value = res.data.data.total;
    })
    .catch(() => {
      ElMessage.error("请联系管理员");
    });
};

onMounted(() => {
  getInfo();
});
</script>

<template>
  <!-- 搜索条件 -->
  <el-form class="div-class" style="height: 45px">
    <el-form-item>
      <el-form-item label="编号">
        <el-input
          v-model="id"
          class="margin size"
          placeholder="请输入编号"
          @change="getById"
        ></el-input>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="time.startTime"
          type="date"
          placeholder="选择日期"
          class="margin size"
        />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="time.stopTime"
          class="size"
          type="date"
          placeholder="选择日期"
          @change="getByTime"
        />
      </el-form-item>
    </el-form-item>
  </el-form>

  <!-- 数据展示 -->
  <el-table :data="tableData" class="custom-table" empty-text="暂无数据">
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="companyName" label="企业名称" />
    <el-table-column prop="warehousetype" label="库房类型" />
    <el-table-column prop="hostSn" label="管理主机号" />
    <el-table-column prop="meterSn" label="仪表编号" />
    <el-table-column prop="meterName" label="仪表名称" />
    <el-table-column prop="collectionTime" label="采集日期" />
    <el-table-column prop="tem" label="温度" />
    <el-table-column prop="maxMinTem" label="温度阈值" />
    <el-table-column prop="temAlert" label="温度级别" />
    <el-table-column prop="hum" label="湿度" />
    <el-table-column prop="maxMinHum" label="湿度阈值" />
    <el-table-column prop="humAlert" label="湿度级别" />
  </el-table>

  <!-- 分页 -->
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="pageInfo.pageSize"
    v-model:current-page="pageInfo.pageNum"
    @current-change="getInfo"
    class="pagination"
  />
</template>
<style scoped>
.div-class {
  display: flex;
  justify-content: flex-end;
}
:deep(.margin) {
  margin-right: 25px;
}
:deep(.size) {
  width: 160px;
}
.custom-table {
  height: calc(100% - 97px);
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>